<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单编辑</title> 
<link href="#(ctx)/res/lib/chosen_v1.8.2/chosen.css" type="text/css" rel="stylesheet" />
#@resources()
<style type="text/css">
.layui-form-select{display: none;}
</style>

</head>
<body>
	<div class="layui-container">
		<form class="layui-form" action="">
			<input type="hidden" name="menu.isLeaf" value="#(menu.isLeaf)" /> <!-- 是否叶子节点 -->
			<input type="hidden" name="menu.id" value="#(menu.id)" /> <!-- id -->
			<div class="layui-form-item">
				<label class="layui-form-label">上级菜单</label>
				<div class="layui-input-block">
					<select id="parentMenu" name="menu.parent_id" style="width: 100%;">
						#for(item : menus)
							#if(menu.parent_id == item.id)
							   <option selected="selected" value="#(item.id)">#(item.long_name)</option>
							#else
							   <option value="#(item.id)">#(item.long_name)</option>
							#end
						#end
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单名称</label>
				<div class="layui-input-block">
					<input type="text" name="menu.menu_name" required lay-verify="required"
						placeholder="请输入标题" value="#(menu.menu_name)" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单编码</label>
				<div class="layui-input-block">
					<input type="text" name="menu.menu_no" required lay-verify="required"
						placeholder="请输入菜单编码" value="#(menu.menu_no)" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单链接</label>
				<div class="layui-input-block">
					<input type="text" name="menu.menu_url" required lay-verify="required"
						placeholder="请输入菜单链接" value="#(menu.menu_url)" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单图标</label>
				<div class="layui-input-block">
					<input type="text" name="menu.menu_icon" required lay-verify="required"
						placeholder="请输入菜单图标class" value="#(menu.menu_icon)" autocomplete="off" class="layui-input">
				</div>
			</div>
			
		    <div class="edit-btns">
				<button class="layui-btn layui-btn-sm" lay-submit lay-filter="save">提交</button>
				<button class="layui-btn layui-btn-primary layui-btn-sm" @event="close" >取消</button> 
			</div>
			<!-- <div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0">保存</a><a class="layui-layer-btn1">取消</a></div> -->
		</form>
	</div>
	<script type="text/javascript" src="#(ctx)/res/lib/chosen_v1.8.2/chosen.jquery.js" ></script>
	<script type="text/javascript">
		layui.use([ 'layer','form' ], function() {
			var layer = layui.layer;
			var form = layui.form;
			
			var $parentMenu = $("#parentMenu");
			var menuChosen = $parentMenu.chosen({width:'100%', no_results_text: "没有匹配的结果", allow_single_deselect: true, search_contains: true});
			menuChosen.change(function(e, selected){
				console.log(selected);
			});
			
			form.on('submit(save)', function(data){
				  //后台保存数据
				  $.post(ctx +"/menu/save", data.field, function(ret){
					  if(ret.state == "ok"){
						  parent.events.search();//调用父页面的查询表格方法刷新数据
						  parent.events.initMenuTree();
					      events.close();
					  }else{
						  layer.alert(ret.msg || "服务器异常")
					  }
				  })
			      return false;//阻止表单跳转
			});
			
			var events = {
			    close: function(){
			    	var index = parent.layer.getFrameIndex(window.name);  
			    	parent.layer.close(index); 
			    }
			};
			
			$('.layui-btn').on('click', function(){
			    var type = $(this).attr('@event');
			    events[type] ? events[type].call(this) : '';
			});
		});
	</script>
</body>
</html>